<template>
	<view class="content">
		<view style="padding: 70rpx 0 10rpx 10rpx;width: 65%;">
			<u-search bg-color="white" placeholder="搜索商品" v-model="keyword" shape="round" :clearabled="true" :show-action="true" action-text="搜索" @search="goSearch()" @custom="goSearch()"></u-search>
		</view>
		<view class="wrap" v-if="isSousuo">
			<u-swiper :list="lunboImg" height="520px"></u-swiper>
		</view>
		<view class="fenlei-box" v-if="isSousuo">
			<view v-for="(item,i) in fenleiBox" :key="item.url" class="fenlei-item">
				<view @click="goPages(i)">
					<image :src="item.url" style="width: 100rpx;height: 100rpx;"></image>
					<view>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="renpintj" v-if="isSousuo">
			<view class="tuijianbox">
				<image class="tui-img" @click="goDetail(tuijianGoods[0].gid)" :src="switchImg(tuijianGoods,0)" style="width: 60%;height: 60%;">
				<view class="fonts">热品推荐</view>
				<view class="fonts" v-if="tuijianGoods.length>0">{{tuijianGoods[0].gName}}</view>
			</view>
			<view class="tuijianbox">
				<image class="tui-img" @click="goDetail(tuijianGoods[1].gid)" :src="switchImg(tuijianGoods,1)" style="width: 60%;height: 60%;">
				<view class="fonts">热品推荐</view>
				<view class="fonts" v-if="tuijianGoods.length>1">{{tuijianGoods[1].gName}}</view>
			</view>
			<view class="tuijianbox">
				<image class="tui-img" @click="goDetail(tuijianGoods[2].gid)" :src="switchImg(tuijianGoods,2)" style="width: 60%;height: 60%;">
				<view class="fonts">热品推荐</view>
				<view class="fonts" v-if="tuijianGoods.length>2">{{tuijianGoods[2].gName}}</view>
			</view>
		</view>
		<view style="width: 95%;background-color: white;margin: 10px auto;border-radius: 15rpx;" v-if="isSousuo">
			<view class="baomaihang" style="display: flex;border-bottom: 1rpx #8c8c8c solid;">
				<view style="width: 50%;padding: 15rpx 20rpx 0 30rpx;border-right: 1rpx #8c8c8c solid;" v-if="tuijianGoods.length>0" @click="goDetail(tuijianGoods[0].gid)">
					<view style="font-size: 17px;font-weight: 900;">全返推荐</view>
					<view style="font-size: 12px;display: flex;margin-top: 10rpx;color: #909399;">
						<view class="fonts">{{tuijianGoods[0].gName}}</view>
						<view style="padding-left: 10rpx;font-size: 14px;color: red;">￥{{tuijianGoods[0].gPrice}}</view>
					</view>
					<view style="margin: 10rpx 0 25rpx 0;display: flex;justify-content: space-between;">
						<view>
							<image :src="switchImg(tuijianGoods,0)" style="width: 65px;height: 65px;"></image>
						</view>
						<view style="margin-top: 90rpx;">
							<image src="../../static/center/jt.png" style="width: 20px;height: 20px;"></image>
						</view>
					</view>
				</view>
				<view style="width: 50%;padding: 15rpx 20rpx 0 30rpx;" v-if="pinpaiTuijian.length>0" @click="goPinpaiDetail(pinpaiTuijian[0].gid)">
					<view style="font-size: 17px;font-weight: 900;display: flex;">
						<view>品牌推荐</view>
						<image src="../../static/center/huo.png" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view style="font-size: 12px;display: flex;margin-top: 10rpx;color: #909399;">
						<view class="fonts">{{pinpaiTuijian[0].gname}}</view>
						<view style="padding-left: 10rpx;font-size: 14px;color: red;">￥{{pinpaiTuijian[0].gprice}}</view>
					</view>
					<view style="margin: 10rpx 0 25rpx 0;display: flex;justify-content: space-between;">
						<view>
							<image :src="switchImages(pinpaiTuijian[0].gimages)" style="width: 65px;height: 65px;"></image>
						</view>
						<view style="margin-top: 90rpx;">
							<image src="../../static/center/jt.png" style="width: 20px;height: 20px;"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="baomaihang" style="display: flex;">
				<view style="width: 50%;padding: 15rpx 20rpx 0 30rpx;border-right: 1rpx #8c8c8c solid;" v-if="jifenTuijian.length>0" @click="goJifenDetial(jifenTuijian[0].gid)">
					<view style="font-size: 17px;font-weight: 900;display: flex;">
						<view>积分推荐</view>
						<image src="../../static/center/new.png" style="width: 40rpx;height: 20rpx;margin: 8rpx 0 0 8rpx;">
					</view>
					<view style="font-size: 12px;display: flex;margin-top: 10rpx;color: #909399;">
						<view class="fonts">{{jifenTuijian[0].gname}}</view>
						<view style="padding-left: 10rpx;font-size: 14px;color: red;">￥{{jifenTuijian[0].gprice}}</view>
					</view>
					<view style="margin: 10rpx 0 25rpx 0;display: flex;justify-content: space-between;">
						<view>
							<image :src="switchImages(jifenTuijian[0].gimages)" style="width: 65px;height: 65px;"></image>
						</view>
						<view style="margin-top: 90rpx;">
							<image src="../../static/center/jt.png" style="width: 20px;height: 20px;"></image>
						</view>
					</view>
				</view>
				<view style="width: 50%;padding: 15rpx 20rpx 0 30rpx;" v-if="xingyunTuijian.length>0" @click="goXingyunDetail(xingyunTuijian[0].gid)">
					<view style="font-size: 17px;font-weight: 900;display: flex;">
						<view>幸运推荐</view>
						<image src="../../static/center/hot.png" style="width: 40rpx;height: 20rpx;margin: 8rpx 0 0 8rpx;">
					</view>
					<view style="font-size: 12px;display: flex;margin-top: 10rpx;color: #909399;">
						<view class="fonts">{{xingyunTuijian[0].gname}}</view>
						<view style="padding-left: 10rpx;font-size: 14px;color: red;">￥{{xingyunTuijian[0].gprice}}</view>
					</view>
					<view style="margin: 10rpx 0 25rpx 0;display: flex;justify-content: space-between;">
						<view>
							<image :src="switchImages(xingyunTuijian[0].gimages)" style="width: 65px;height: 65px;"></image>
						</view>
						<view style="margin-top: 90rpx;">
							<image src="../../static/center/jt.png" style="width: 20px;height: 20px;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选项卡 -->
		<view class="tab-box" v-if="isSousuo">
			<view class="tab-item" :class="sort==2?'active':''" @click="getGoodsByType(2)">推荐</view>
			<view class="tab-item" :class="sort==0?'active':''" @click="getGoodsByType(0)">热卖</view>
			<view class="tab-item" :class="sort==1?'active':''" @click="getGoodsByType(1)">新品</view>
		</view>
		<!-- 所有商品分页显示 -->
		<view class="good-box" v-if="allGoods.length>0">
			<view class="goods-item" v-for="(item,i) in allGoods" :key="item.gid" @click="goDetail(item.gid)">
				<image :src="switchImg(allGoods,i)" class="goods-img"></image>
				<view class="fgx">
					<view class="goods-miaoshu">{{item.gName}}</view>
					<view class="small-container">
						<view>
							<text class="qian">{{item.gPrice}}</text>
						</view>
						<view>
							<image src="../../static/index/gm.png" class="xiaoche" @click.stop="jiaGou(item.gid,item.gPrice)"></image>
						</view>	
					</view>
				</view>
			</view>
		</view>  
		<u-loadmore :status="status" />
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-tabbar v-model="current" :list="list" :mid-button="false" @change="tab"></u-tabbar>
	</view>
</template>

<script>
	import amap from '../../utils/amap-wx.130.js';		// 高德小程序插件  
	export default {
		data() {
			return {
				// 底部tab
				list:[
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/quanfan/fenlei/fenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/quanfan/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/center/index"
					},
				],
				current:0,
				rawList:[],	// 轮播图原始数据
				isNoShowButton:'',// 不显示按钮的下标
				fenleiBox:[
					{"url":"../../static/index/qftq.png","title":"全返特区","target":""},
					{"url":"../../static/index/jfsc.png","title":"积分商城","target":"../jifen/index"},
					{"url":"../../static/index/xysc.png","title":"幸运商城","target":"../xingyun/index"},
					{"url":"../../static/index/ppgx.png","title":"品牌共享","target":"../pinpai/index"},
					// {"url":"../../static/index/jkzx.png","title":"精准咨询","target":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf09626cd115da333&redirect_uri=http%3A%2F%2Fxljksc.com%2Fgzh.do%3Fp%3Dzixun%26gzhId%3D1&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect"},
					// {"url":"../../static/index/jkgw.png","title":"健康顾问","target":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf09626cd115da333&redirect_uri=http%3A%2F%2Fxljksc.com%2Fgzh.do%3Fp%3Dwenyisheng%26gzhId%3D1&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect"},
					// {"url":"../../static/index/zhibo.png","title":"携联直播","target":"https://wx.vzan.com/plug-ins/?v=637710289858435234#/FixupIndex/237543298?shareuid=0"},
					// {"url":"../../static/index/tougao.png","title":"欢迎投稿","target":"http://xljksc.com/weixin/xielian/fun/tougao.html"},
				],
				tuijianGoods:[],	// 推荐的商品
				sort:2,				// 排序规则， 0销量  1上架时间  2权重(推荐)  都为降序
				allGoods:[ ],		// 分页查询的商品
				page:1,				// 当前页数
				limit:10	,		// 每页数量
				status:'nomore',
				scrollTop: 0,		// 用于返回顶部
				jifenTuijian:[],	// 积分推荐商品
				xingyunTuijian:[],	// 幸运推荐商品
				pinpaiTuijian:[],	// 品牌共享推荐商品
				keyword: '',		// 搜索框的值
				isSousuo:true,		// 是否搜索
				
				//定位信息
				key: '2f7f27be426ba68483764cd2e9f2c968' ,
				sheng: "",
				shi: "",
				qu: "",
			}
		},
		onLoad() {
			// 查询用户地址
			this.getAddress();
			// this.getInit();
		},
		//分享给好友
		onShareAppMessage() {
			return {
				title: '携联健康',
				// imageUrl: 'https://images.cnblogs.com/cnblogs_com/blogs/701070/galleries/2024512/o_210902094439beijing.jpg',
				imageUrl:'../../static/center/bg1.jpeg',
				path: 'pages/index/index'
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: '携联健康',
				path:"pages/index/index",
				imageUrl:'../../static/center/bg1.jpeg'
				// imageUrl: 'https://images.cnblogs.com/cnblogs_com/blogs/701070/galleries/2024512/o_210902094439beijing.jpg',
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			tab(e){
				this.current = e;
			},
			// 得到用户的地址
			getAddress(){
				//使用高德插件定位
				this.amapPlugin = new amap.AMapWX({  	// 初始化高德插件
					key: this.key  
				}); 
				this.amapPlugin.getRegeo({  
					success: (data) => {
						// this.addressName = data[0].name.substr(0,3); 
						this.sheng = data[0].regeocodeData.addressComponent.province;
						let shiqu = data[0].regeocodeData.addressComponent.city;
						if(shiqu==null || shiqu=="" || shiqu==undefined || shiqu.length<1){
							
						}else{
							this.shi = shiqu;
						}
						this.qu = data[0].regeocodeData.addressComponent.district;
						console.log("全返商城首页  省份："+this.sheng+" 城市："+this.shi+" 区域："+this.qu)
						uni.setStorageSync("areaName",this.qu);
						this.getInit();
					},
					fail: (res) => {
						this.getInit();
						console.log(JSON.stringify(res));
					}
				});
			},
			// 初始化首页数据
			getInit(){
				this.openIdLogin();
				// 查询轮播图
				this.$http.get('/xieliangoods.do', {
					p: 'findAlllbt',
				}).then(res => {
					this.rawList = res.data.list;
				})
				// 查询首页商品
				// let areaName = uni.getStorageSync("areaName");
				let areaName = this.qu;
				if(areaName!=null && areaName!="" && areaName!=undefined){
					console.log("根据定位区域查询商品："+areaName);
					this.$http.get('/xieliangoods', {
						p: "findAllXielianGoodsAddress",
						paixu:2,
						qu:areaName
					}).then(res => {
						this.allGoods = res.data.list;
						// 查询推荐商品
						this.$http.get('/xieliangoods/selectTuijianGoods', {
							page:1,
							limit:10
						}).then(res => {
							let count = res.data.list.length;
							if(count < 3){
								this.tuijianGoods = this.allGoods
							}else{
								this.tuijianGoods = res.data.list;
							}
						})
					})
				}else{
					this.$http.get('/xieliangoods', {
						p: "findAllXieliangoods",
						paixu:2
					}).then(res => {
						this.allGoods = res.data.list;
						// 查询推荐商品
						this.$http.get('/xieliangoods/selectTuijianGoods', {
							page:1,
							limit:10
						}).then(res => {
							let count = res.data.list.length;
							if(count < 3){
								this.tuijianGoods = this.allGoods
							}else{
								this.tuijianGoods = res.data.list;
							}
						})
					})
				}
				// this.$http.get('/xieliangoods', {
				// 	p: url,
				// 	paixu:2
				// }).then(res => {
				// 	this.allGoods = res.data.list;
				// 	// 查询推荐商品
				// 	this.$http.get('/xieliangoods/selectTuijianGoods', {
				// 		page:1,
				// 		limit:10
				// 	}).then(res => {
				// 		let count = res.data.list.length;
				// 		if(count < 3){
				// 			this.tuijianGoods = this.allGoods
				// 		}else{
				// 			this.tuijianGoods = res.data.list;
				// 		}
				// 	})
				// })
				// 查询积分商城推荐商品
				this.$http.get('/xieliangoods/chaTuijianJifenGoods', {
					page:1,
					limit:1
				}).then(res => {
					if(res.data.data.length>0){
						this.jifenTuijian = res.data.data;
					}
				})
				// 查询幸运商城推荐商品
				this.$http.get('/xieliangoods/chaTuijianGoods', {
					page:1,
					limit:1
				}).then(res => {
					if(res.data.data.length>0){
						this.xingyunTuijian = res.data.data;
					}
				})
				// 查询品牌共享推荐商品
				this.$http.get('/ppgoods/tuijianGoods', {
					page:1,
					limit:1
				}).then(res => {
					if(res.data.data.length>0){
						this.pinpaiTuijian = res.data.data;
					}
				})
				
				// 控制下面四个按钮是否显示
				// if(this.fenleiBox.length > 6){
				// 	this.$http.get('/userinfo/getConfigurationButtonInfo', {
						
				// 	}).then(res => {
				// 		let isNoShowButton = res.data.msg;
				// 		if(!this.isNull(isNoShowButton)){
				// 			let nums = isNoShowButton.split("");
				// 			for(var i=nums.length;i>0;i--){
				// 				this.fenleiBox.splice(nums[i-1]-1,1);
				// 			}
				// 		}
				// 	})
				// }
			},
			// 搜索
			goSearch(){
				// console.log('搜索条件:'+this.keyword)
				this.allGoods = [];
				this.page = 1;
				if(this.keyword==null || this.keyword=="" || this.keyword==undefined){
					// console.log("搜索框为空")
					this.isSousuo = true;
					this.getInit()
					// 查询首页商品
					// this.$http.get('/xieliangoods', {
					// 	p: 'findAllXieliangoods',
					// 	paixu:2
					// }).then(res => {
					// 	this.allGoods = res.data.list;
					// })
				}else{
					// console.log("solr搜索")
					this.isSousuo = false;
					// this.$http.get('/xieliangoods/findXielianGoodsByName',{
					this.$http.get('/xielianGoodsSolr/search',{
						page:this.page,
						limit:this.limit,
						// gName:this.keyword
						key:this.keyword
					}).then(res => {
						if(res.data.length > 0){
							this.allGoods = this.allGoods.concat(res.data);
						}else{
							this.$http.get('/xieliangoods/findXielianGoodsByName',{
								page:this.page,
								limit:this.limit,
								gName:this.keyword
							}).then(res => {
								this.allGoods = this.allGoods.concat(res.data)
							})
						}
						// console.log(this.allGoods)
					})
				}
			},
			// 点击小车加购
			jiaGou(gid,jia){
				if(uni.getStorageSync("logined")){
					let userid = uni.getStorageSync("usersId");
					this.$http.get('/gouwuche', {
						p: 'addCatByMini',
						userid:userid,
						gid:gid,
						catnum:1,
						money:jia
					}).then(res => {
						if(res.data=='2'){
							this.$u.toast("加入成功");
							uni.$emit("checkCart")
						}else if(res.data=='1'){
							this.$u.toast("不能重复添加");
						}else if(res.data=='3'){
							// this.$u.toast("请到商品页选择规格");
							uni.navigateTo({
								url:'../quanfan/GoodsDetail?gid='+gid+'&showAddCartBox=true'
							})
						}
					})
				}else{
					this.$u.toast("请先登录")	;
					return;
				}
			},
			// n:排序规则
			getGoodsByType(n){
				this.sort=n;
				this.page=1;	// 每次点击的时候显示第一页
				this.$http.get('/xieliangoods', {
					p: 'findAllXieliangoods',
					paixu:n,
					page:this.page,
					limit:this.limit
				}).then(res => {
					this.allGoods = res.data.list;
				})
			},
			
			//处理图片
			switchImg(obj,n){
				if(obj.length>0){
					return this.host+obj[n].gImages;
				}else{
					return '../../static/index/gm.png';
				}	
			},
			switchImages(images){
				if(images.length>0){
					return this.host+images
				}else{
					return '../../static/index/gm.png';
				}
			},
			
			// 跳转到其他商城
			goPages(n){
				if(n==1){	// 点击积分商城
					uni.navigateTo({
						url:'../../pages_jifen/index'
					})
					return
				}
				if(n==2){	// 点击幸运商城
					uni.navigateTo({
						url:'../../pages_xingyun/index'
					})
					return
				}
				if(n==3){	// 点击品牌共享
					uni.navigateTo({
						url:'../../pages_pinpai/index'
					})
					return
				}
				if(this.fenleiBox[n].title == "精准咨询"){
					if(uni.getStorageSync('logined'))
						uni.navigateTo({
							url:'../../pages_jifen/center/myZixun'
						})
					else{
						this.$u.toast("请先登录");
						setTimeout(() => {
							uni.navigateTo({
								url:'../center/login'
							})
						},500)
					}
				}
				if(this.fenleiBox[n].title == "健康顾问"){
					uni.navigateTo({
						url:'doctorList'
					})
					return
				}
				if(this.fenleiBox[n].title == "欢迎投稿"){
					uni.navigateTo({
						url:'../center/tougao'
					})
					return
				}
				if(this.fenleiBox[n].title == "携联直播"){
					uni.navigateTo({
						url:'xielianZhiBo'
					})
					return
					// let url = this.fenleiBox[n].target;
					// let url = "https://wx.vzan.com/live/livedetail-237543298";
					// uni.navigateTo({
					// 	url:'../quanfan/MyWebview/MyWebview?url='+url
					// });
					// this.$http.get('/gzh.do',{
					// 	p:'goXlscZhiBo'
					// }).then(res => {
					// 	// console.log(res)
					// })
				}
			},
			//全返商城商品详情
			goDetail(n){
				uni.navigateTo({
					url:'../quanfan/GoodsDetail?gid='+n
				})
			},
			//积分商场商品详情
			goJifenDetial(gid){
				uni.navigateTo({
					url:'../../pages_jifen/goods/goodsDetail?gid='+gid
				})
			},
			//品牌共享商品详情
			goPinpaiDetail(gid){
				uni.navigateTo({
					url:'../../pages_pinpai/goods/goodsDetail?gid='+gid
				})
			},
			//幸运商城商品详情
			goXingyunDetail(gid){
				uni.navigateTo({
					url:'../../pages_xingyun/goods/goodsDetail?gid='+gid
				})
			},
			//根据小程序openId自动登录
			openIdLogin(){
				let openId = uni.getStorageSync('openId')
				if(!this.isNull(openId)){
					return;
				}
				uni.login({
					success: res => {
						this.$http.get('/userinfo/getOpenid',{
							code:res.code
						}).then(res => {
							let openId = res.data;
							// console.log("首页openId："+openId)
							uni.setStorageSync('openId',openId)
							this.$http.post('/userinfo/openIdLogin', {
								openId:openId
							},
							{header:{'content-type':"application/x-www-form-urlencoded"}},
							).then(res => {
								if(res.data.code==200){
									let userid = res.data.data.usersId;
									let type = res.data.count;
									if(type != 0){
										this.$store.state.user = res.data.data;
										this.$store.state.logined=true;
										uni.setStorageSync("usersId",userid);
										uni.setStorageSync("userinfo",res.data.data);
										uni.setStorageSync("logined",true);
										uni.setStorageSync('xcxIcon',res.data.msg);
										//刷新页面数据
										uni.$emit("checkCart");				//携联商城购物车
										uni.$emit("checkUserInfo");			//携联商城个人中心加载用户数据
										uni.$emit('getOrderByGroup');		//携联商城个人中心加载订单数量
										uni.$emit('getJifenCenter');		//积分商城个人中心
										uni.$emit('getJifenCat');			//积分商城购物车
										uni.$emit('init');					//品牌共享首页数据（商品价格）
										uni.$emit('checkPinpaiUserInfo');	//品牌共享个人中心加载用户数据
										uni.$emit('getPinpaiOrderByGroup');	//品牌共享个人中心加载订单状态数量
										uni.$emit('getXingyunUserInfo');	//幸运商城个人中心加载用户数据
									}
								}
							})
						})
					}
				})
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		// 滑倒底部上拉加载
		onReachBottom() {
			this.page++;
			if(this.isSousuo){
				this.$http.get('/xieliangoods', {
					p: 'findAllXieliangoods',
					paixu:this.sort,
					page:this.page,
					limit:this.limit
				}).then(res => {
					this.allGoods =this.allGoods.concat( res.data.list);
				})
			}else{
				this.$http.get('/xielianGoodsSolr/search',{
					page:this.page,
					limit:this.limit,
					key:this.keyword
				}).then(res => {
					this.allGoods = this.allGoods.concat(res.data);
				})
			}
		},
		computed:{
			lunboImg(){
				let tu=[	];
				for(let i=0;i<this.rawList.length;i++){
					let obj = {	};
					obj.image=this.host+this.rawList[i].cimages;
					obj.title=this.rawList[i].cimgTitle;
					tu.push(obj);
				}
				return tu;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fonts{
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	page{
		background-color: #f1f1f1;
	}
	.search-input{
		// border: 1px solid #E4E7ED;
		background-color: white;
		width: 500rpx;
	}
	.fenlei-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 5px 5px;
		border-radius: 15rpx;
		background-color: white;
		padding: 4px 0 5px 0;
	}
	.fenlei-box .fenlei-item{
		width: 25%;
		text-align: center;
		padding: 3px;
		// padding: 10rpx 35rpx;
	}
	// .fenlei-box::after{
	// 	content: '';
	// 	width: 70%;
	// }
	.renpintj{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.tuijianbox {
	    padding-top: 10px;
	    width: 200rpx;
	    height: 220rpx;
	    text-align: center;
	    color: white;
	    background-repeat: no-repeat;
	    background-size: 100%;
	}
	.tuijianbox .fonts{
		font-size: 16rpx;
		position: relative;
		top: 10rpx;
	}
	.tuijianbox .tui-img{
		margin: auto;
	}
	.tuijianbox:nth-child(1) {
	    background-image: url('../../static/index/kk-1.png');
	}.tuijianbox:nth-child(2) {
	    background-image: url('../../static/index/kk-2.png');
	}.tuijianbox:nth-child(3) {
	    background-image: url('../../static/index/kk-3.png');
	}
	.tab-box{
		display: flex;
		margin-top: 20rpx;
		padding-left: 20rpx;
	}
	.tab-box .active{
		border-bottom: 5rpx solid red;
	}
	.tab-box .tab-item{
		margin-right: 20rpx;
	}
	.good-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.goods-item {
	    width: 49%;
	    margin: 10rpx auto;
	    background-color: white;
	    padding: 20rpx 5rpx;
	}
	.goods-item .goods-img {
	    height: 160px;
	    width: 155px;
	    display: block;
	    margin: auto;
	}
	.fgx {
	    border-top: 1px solid #ccc;
	    width: 80%;
	    margin: auto;
	    margin-top: 0.625rem;
		padding-top: 10rpx;
	}
	.qian::before {
	    content: '￥';
	    color: red;
	    font-size: 9px;
	    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	}
	.goods-miaoshu{
		display:-webkit-box;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-line-clamp:1;
		-webkit-box-orient:vertical;
	}
	.small-container {
		margin-top: 10rpx;
	    display: flex;
	    justify-content: space-between;
	}
	.small-container>view:nth-child(2)>.xiaoche {
	    width: 40rpx;
			height: 40rpx;
	}
	.good-box::after{
		content: '';
		width: 50%;
	}
</style>
